<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css" >

    <title>Hello, world!</title>
  </head>
  <body>
 

    <div id="app">

       <table class="table">
         <thead>
           <tr>
             <th>教工号</th>
             <th>姓名</th>
             <th>性别</th>
             <th>学历</th>
             <th>职务</th>
             <th>出生日期</th>
             <th>状态</th>             
           </tr>
         </thead>
         <tbody>
           <tr v-for="item in teaList" :key="item.t_id">
            <td>{{item.t_id}}</td>
            <td>{{item.t_name}}</td>
            <td>{{item.t_sex==1?'男':'女'}}</td>
            <td>{{eduMap[item.t_edu]}}</td>
            <td>{{item.t_title}}</td>
            <td>{{item.t_birth}}</td>           
            <td>{{item.t_status}}</td>    
           </tr>
         </tbody>
       </table>


    </div>

    
    <script src="js/jquery-3.6.0.slim.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/vue.global.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/my-axios.js"></script>
    <script src="layer/layer.js"></script>

    <script>


        const eduMap = {
          1:'高中',
          2:'专科',
          3:'本科',
          4:'硕士',
          5:'博士'
        };

        //定义vue应用配置
        const app = {
            //data函数专门用来定义数据
            data(){
                return {
                  eduMap, //此写法 等同 eduMap ：eduMap
                  teaList:[],//教师列表数据
                  
                };
            },

            //定义方法
            methods:{
                
            },

            //定义回调方法：mounted 该方法在页面渲染完成立即执行
            mounted(){
              //向服务端接口http://localhost:8888/jd_demo_server_war_exploded/tea/teaList，发出get请求
              const loadIdx = layer.load();              
              myAxios.get('/tea/teaList').then((response)=>{
                layer.close(loadIdx);                 
                this.teaList = response.data.data;
              });
            }
        };

        Vue.createApp(app).mount('#app')

    </script>
    

   
  </body>
</html>